<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>发送邮件</title>
    <link rel="stylesheet" th:href="@{layui/css/layui.css}">
    <script type="text/javascript" th:src="@{layui/layui.js}"></script>
    <script type="text/javascript" th:src="@{jquery3.5.1/jquery-3.5.1.min.js}"></script>

</head>
<body  style="background-color: #8D8D8D"><!--bgcolor="#a9a9a9"-->
<div class="layui-container" style="height: 1800px;border: 1px solid black">
    <div class="layui-row">
        <div class="layui-col-sm8 layui-col-sm-offset2">
            <form id="sendForm" enctype="multipart/form-data" style="margin-top: 100px;">
                <!--                <div class="layui-form-item">-->
                <!--                    <label class="layui-form-label">收件人</label>-->
                <!--                    <div class="layui-input-block">-->
                <!--                        <input type="text" placeholder="all" readonly style="background-color: blanchedalmond" class="layui-input"/>-->
                <!--&lt;!&ndash;                        <div th:each="user,userStat:${users}">&ndash;&gt;-->
                <!--&lt;!&ndash;                            <span th:text="${user.name}"></span>&ndash;&gt;-->
                <!--&lt;!&ndash;                            <span th:text="${user.email}"></span>&ndash;&gt;-->
                <!--&lt;!&ndash;                        </div>&ndash;&gt;-->
                <!--                    </div>-->
                <!--                </div>-->
                <div class="layui-form-item">
                    <label class="layui-form-label" for="subject">主题</label>
                    <div class="layui-input-block">
                        <input type="text" name="subject" class="layui-input" id="subject">
                    </div>
                </div>
                <div class="layui-form-item ">
                    <label class="layui-form-label" for="content">正文</label>
                    <div class="layui-input-block">
                        <textarea name="content" class="layui-textarea" id="content"></textarea>
                    </div>
                </div>
                <!-- 因为文件要使用 MultipartFile 进行映射，所以不要和实体类的属性名保持一致 -->
                <div class="layui-form-item layui-col-sm-offset1">
                    <input type="file" value="" name="file_image" onchange="showImg(this)">
                    <img src="" alt="" id="img" width="700px">
                </div>
                <input type="button" value="发送" onclick="realSend()" class="layui-btn layui-col-sm-offset5">
                <input type="reset" value="重置" class="layui-btn layui-btn-primary">
                <br><br><br>
                <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="demo" style="display: none" id="progress">
                    <div class="layui-progress-bar layui-bg-green" lay-percent="20%" id="currentProgress"></div>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    function realSend() {
        let subjectDom = $("#subject");
        let contentDom = $("#content");
        if (subjectDom.val() == "") {
            alert("请输入主题")
            subjectDom.focus();
        } else if (contentDom.val() == "") {
            alert("请输入正文")
            contentDom.focus();
        } else {
            send();
        }
    }

    function send() {
        let formData = new FormData($("#sendForm").get(0)); //要使用dom的FormData对象，则需要将jquery对象通过get方法转为dom对象
        layui.use(['element','jquery'],function () {
            let element=layui.element;
            showDiv();
            setTimeout(function () {
                element.progress('demo', '50%')
            }, 100)
            setTimeout(function () {
                element.progress('demo', '70%')
            }, 500)
            setTimeout(function () {
                element.progress('demo', '99%')
            }, 600)
            $.ajax({
                type: "post",       //注意这里必须用post，一方面文件大，另一方面（猜测邮箱发送需要post）
                url: "send",
                data: formData,
                // data:$("#sendForm").serialize(),
                //使用FormData作为ajax发送服务器的数据载体，需设置
                contentType: false,  //防止request请求位置文件头上下文对象，如果进行处理，则会丢失文件流对象(告诉jQuery不要去设置Content-Type请求头)
                processData: false,  //防止request请求自动处理FormData对象(告诉jQuery不要去处理发送的数据)

                dataType: "Json",    //服务器相应的内容类型
                success: function (data) {   //data是json对象
                    console.log("data:" + data)
                    if (data === 1) {
                        // alert("发送成功！")
                        setTimeout(function () {
                            element.progress('demo', '100%')
                        }, 150)
                        setTimeout(function () {
                            alert("发送成功！")
                        },200)
                    } else {
                        alert("出错了！！！")
                    }
                },
                error: function () {
                    alert("发送失败！！！")
                }
            });
        })

    }

    function showImg(obj) {
        let file = $(obj)[0].files[0];    //获取文件信息
        if (file) {
            let reader = new FileReader();  //调用FileReader
            reader.readAsDataURL(file); //将文件读取为 DataURL(base64)
            reader.onload = function (evt) {   //读取操作完成时触发。
                $("#img").attr('src', evt.target.result)  //将img标签的src绑定为DataURL
            };
        } else {
            alert("上传失败");
        }
    }

    function showDiv() {
        document.getElementById("progress").style.display="";
    }
    //预览图片
    // function onLoadImage() {
    //     $("#onLoadImage").html("");
    //     for(var i = 0; i < curFiles.length; i++){
    //         (function(i){
    //             var file = curFiles[i];
    //             var reader = new FileReader();
    //             reader.readAsDataURL(file);
    //             reader.onload = function(){
    //                 $('#onLoadImage').append("<img src='"+reader.result+"'/><span><span>"+file.name+"</span><button id='"+i+"' onclick='del(this.id)'>删除</button></span><br>");
    //             }
    //         })(i)
    //     }
    // }
</script>
</body>
</html>